import * as echarts from 'echarts'
import type { EChartsCoreOption } from 'echarts'

export function lineChartsFn(): EChartsCoreOption {
	const xLabel = ['2023/3/12', '2023/3/13', '2023/3/14', '2023/3/15', '2023/3/16', '2023/3/17']
	const L0 = ['40', '60', '22', '85', '50', '40']
	const L1 = ['50', '30', '72', '35', '80', '60']

	const option = {
		tooltip: {
			trigger: 'axis'
		},
		legend: {
			align: 'left',
			type: 'plain',
			top: '10px',
			textStyle: {
				color: '#666',
				fontSize: 12
			},
			itemGap: 25,
			itemWidth: 18
		},
		grid: {
			top: '15%',
			left: '5%',
			right: '5%',
			bottom: '10%',
			containLabel: true
		},
		xAxis: [
			{
				type: 'category',
				boundaryGap: false,
				axisLine: {
					show: true,
					lineStyle: {
						color: '#666'
					}
				},
				axisLabel: {
					color: '#666',
					padding: 10,
					fontSize: 12
				},
				data: xLabel
			}
		],
		yAxis: [
			{
				min: 0,
				splitLine: {
					show: true,
					lineStyle: {
						color: '#EEEEEE'
					}
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: '#666'
					}
				},
				axisLabel: {
					show: true,
					color: '#666',
					fontSize: 12
				}
			}
		],
		series: [
			{
				name: '2023年订单受理额',
				type: 'line',
				symbol: 'circle',
				showAllSymbol: true,
				symbolSize: 0,
				smooth: true,
				lineStyle: {
					width: 2,
					color: 'rgba(84,131,255,1)',
					borderColor: 'rgba(0,0,0,.4)'
				},
				itemStyle: {
					color: 'rgba(84,131,255,1)'
				},
				tooltip: {
					show: true
				},
				areaStyle: {
					color: new echarts.graphic.LinearGradient(
						0,
						0,
						0,
						1,
						[
							{
								offset: 0,
								color: 'rgba(84,131,255,.3)'
							},
							{
								offset: 1,
								color: 'rgba(84,131,255, 0)'
							}
						],
						false
					),
					shadowColor: 'rgba(25,163,223, 0.5)',
					shadowBlur: 20
				},
				data: L0
			},
			{
				name: '2022年订单受理额',
				type: 'line',
				symbol: 'circle',
				showAllSymbol: true,
				symbolSize: 0,
				smooth: true,
				lineStyle: {
					width: 2,
					color: 'rgba(77,192,36,1)'
				},
				itemStyle: {
					color: 'rgba(77,192,36,1)'
				},
				tooltip: {
					show: true
				},
				areaStyle: {
					color: new echarts.graphic.LinearGradient(
						0,
						0,
						0,
						1,
						[
							{
								offset: 0,
								color: 'rgba(77,192,36,.3)'
							},
							{
								offset: 1,
								color: 'rgba(77,192,36, 0)'
							}
						],
						false
					),
					shadowColor: 'rgba(10,219,250, 0.5)',
					shadowBlur: 20
				},
				data: L1
			}
		]
	}

	return option
}

export function circleChartsFn(): EChartsCoreOption {
	const data = [
		{
			name: '美国',
			value: 45
		},
		{
			name: '欧盟',
			value: 25
		},
		{
			name: '东盟',
			value: 19
		},
		{
			name: '英国',
			value: 11
		}
	]
	const option = {
		color: ['#1fe39c', '#5470C6', '#FFAA00', '#EC3C94'],
		tooltip: {
			trigger: 'item',
			padding: [10, 10],
			formatter: function (params: any) {
				const str =
					params.marker + params.name + '</br>' + '2023年出口额：' + params.value + ' 万美元</br>'
				return str
			}
		},
		legend: {
			orient: 'vertical',
			right: '30px',
			top: 'middle',
			icon: 'circle',
			itemGap: 20,
			formatter: function (name: any) {
				const arr: any[] = []
				data.forEach((e) => {
					if (e.name == name) {
						arr.push(e)
					}
				})
				return '{name|' + arr[0].name + '}'
			},
			textStyle: {
				rich: {
					name: {
						fontSize: 14,
						color: '#333',
						width: 100
					},
					value: {
						width: 80,
						fontSize: 14,
						color: '#333',
						align: 'right'
					}
				}
			}
		},
		series: [
			{
				type: 'pie',
				center: ['46%', '50%'],
				radius: ['50%', '80%'],
				label: {
					show: false
				},
				data: data
			}
		]
	}

	return option
}
